<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="layui-v2.9.6/layui/css/layui.css" />
    <title>Nav导航栏</title>
</head>

<body>
    <!-- <h3>水平导航</h3>
    <ul class="layui-nav">
        <li class="layui-nav-item layui-this">选择</li>
        <li class="layui-nav-item"><a href="#">常规</a></li>
        <li class="layui-nav-item"><a href="#">导航</a></li>
        <li class="layui-nav-item">
            <a href="#">子级</a>
            <dl class="layui-nav-child">
                <dd><a href="">菜单1</a></dd>
                <dd><a href="">菜单2</a></dd>
                <dd><a href="">菜单3</a></dd>
            </dl>
        </li>
    </ul> -->

    <!-- <h3>垂直导航</h3>
    <ul class="layui-nav layui-nav-tree">
        <li class="layui-nav-item layui-this">选择</li>
        <li class="layui-nav-item"><a href="#">常规</a></li>
        <li class="layui-nav-item"><a href="#">导航</a></li>
        <li class="layui-nav-item">
            <a href="#">子级</a>
            <dl class="layui-nav-child">
                <dd><a href="">菜单1</a></dd>
                <dd><a href="">菜单2</a></dd>
                <dd><a href="">菜单3</a></dd>
            </dl>
        </li>
    </ul> -->

    <!-- <h3>侧边导航</h3> -->
    <!-- <ul class="layui-nav layui-nav-tree layui-nav-side">
        <li class="layui-nav-item layui-this">
            <a href="">带徽章<span class="layui-badge">9</span></a>
        </li>
        <li class="layui-nav-item"><a href="#">常规</a></li>
        <li class="layui-nav-item"><a href="#">导航</a></li>
        <li class="layui-nav-item">
            <a href="#">子级</a>
            <dl class="layui-nav-child">
                <dd><a href="">菜单1</a></dd>
                <dd><a href="">菜单2</a></dd>
                <dd><a href="">菜单3</a></dd>
            </dl>
        </li>
    </ul> -->

    <h3>默认面包屑</h3>
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a><cite>导航元素</cite></a>
    </span>
    <h3>自定义分隔符</h3>
    <span class="layui-breadcrumb" lay-separator=">">
        <a href="">首页</a>
        <a href="">国际新闻</a>
        <a href="">亚太地区</a>
        <a><cite>正文</cite></a>
    </span>
    <h3>门户频道</h3>
    <span class="layui-breadcrumb" lay-separator="|">
        <a href="">娱乐</a>
        <a href="">八卦</a>
        <a href="">体育</a>
        <a href="">搞笑</a>
        <a href="">视频</a>
        <a href="">游戏</a>
        <a href="">综艺</a>
    </span>

    <script src="layui-v2.9.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>